<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">系统基础配置</div>
      <div class="ele-page-desc"> 用于系统基础展示等场景。 </div>
    </div>
    <div class="ele-body" style="padding-bottom: 71px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
       
        <el-card
          shadow="never"
          header="提现"
          body-style="padding: 22px 22px 0 22px;"
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="12">
              <el-form-item label="最低提现金额:" prop="min_withdraw">
                <el-input
                  v-model="form.min_withdraw"
                  placeholder="请输入最低提现金额"
                  clearable
                />
                <div class="text-info"></div>
              </el-form-item>

              <el-form-item label="最高提现金额:" prop="max_withdraw">
                <el-input
                  v-model="form.max_withdraw"
                  placeholder="最高提现金额"
                  clearable
                />
                <div class="text-info">输入0-100 最高提现金额</div>
              </el-form-item>

              <el-form-item label="提现手续费:" prop="withdraw_rate">
                <el-input
                  v-model="form.withdraw_rate"
                  placeholder="请输入提现手续费"
                  clearable
                />
                <div class="text-info">输入0-100 手续费百分比</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card
          shadow="never"
          header="基础配置"
          body-style="padding: 22px 22px 0 22px;"
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="8">
              <el-form-item label="浏览器图标:" prop="site_ico">
                <span slot="label">
                  浏览器图标
                  <el-tooltip placement="top">
                    <div slot="content">
                      用于打开网站时浏览器标签页图标展示<br />
                      大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>

                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="modalPicTap('dan', 'site_ico', '浏览器图标')"
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.site_ico != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.site_ico"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('site_ico')"
                            ><i class="el-icon-close"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="10">
              <el-form-item label="系统图标:" prop="site_image">
                <span slot="label">
                  系统图标
                  <el-tooltip placement="top">
                    <div slot="content">
                      系统左侧LOGO展示<br />
                      大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.site_image" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="modalPicTap('dan', 'site_image', '系统图标')"
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.site_image != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.site_image"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('site_image')"
                            ><i class="el-icon-close"></i
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="12">
              <el-form-item
                label="备案号:"
                label-width="130px"
                prop="site_beian"
              >
                <el-input
                  v-model="form.site_beian"
                  placeholder="请输入备案号"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item
                label="京公网备案号:"
                label-width="130px"
                prop="site_jingbeian"
              >
                <el-input
                  v-model="form.site_jingbeian"
                  placeholder="请输入京公网备案号"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item
                label="版权信息:"
                label-width="130px"
                prop="site_copyright"
              >
                <el-input
                  v-model="form.site_copyright"
                  placeholder="请输入版权信息"
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="12">
              <el-form-item
                label="站点名称:"
                label-width="130px"
                prop="site_name"
              >
                <el-input
                  v-model="form.site_name"
                  placeholder="请输入站点名称"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card
          shadow="never"
          header="LOG配置"
          body-style="padding: 22px 22px 0 22px;"
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="10">
              <el-form-item label="登录背景图:" prop="site_login_background">
                <span slot="label">
                  登录背景图
                  <el-tooltip placement="top">
                    <div slot="content">
                      用于登录时的背景图片选择<br />
                      大小尺寸跟分辨率同比例
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!--<ele-image-upload  v-model="form.site_login_background" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="
                      modalPicTap('dan', 'site_login_background', '登录背景图')
                    "
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.site_login_background != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.site_login_background"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('site_login_background')"
                            ><i class="el-icon-close"></i
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="10">
              <el-form-item label="登录左侧图标:" prop="site_login_image">
                <span slot="label">
                  登录左侧图标
                  <el-tooltip placement="top">
                    <div slot="content">
                      登录页左侧展示<br />
                      大小尺寸为510px * 420px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.site_image" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="
                      modalPicTap('dan', 'site_login_image', '登录左侧图标')
                    "
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.site_login_image != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.site_login_image"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('site_login_image')"
                            ><i class="el-icon-close"></i
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card
          shadow="never"
          header="客服配置"
          body-style="padding: 22px 22px 0 22px;"
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="8">
              <el-form-item label="客服二维码:" prop="kf_img">
                <span slot="label">
                  客服二维码
                  <el-tooltip placement="top">
                    <div slot="content"> 大小尺寸为100px * 100px </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!--<ele-image-upload v-model="form.kf_img" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="modalPicTap('dan', 'kf_img', '客服二维码')"
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.kf_img != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.kf_img"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('kf_img')"
                          >
                            <i class="el-icon-close"></i
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="上班时间:" prop="kf_date">
                <el-input
                  v-model="form.kf_date"
                  placeholder="请输入上班时间描述"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12">
              <el-form-item label="手机号:" prop="kf_phone">
                <el-input
                  v-model="form.kf_phone"
                  placeholder="请输入手机号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="微信号:" prop="kf_wxno">
                <el-input
                  v-model="form.kf_wxno"
                  placeholder="请输入微信号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="邮箱:" prop="kf_mailbox">
                <el-input
                  v-model="form.kf_mailbox"
                  placeholder="请输入"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item label="地址:" prop="kf_address">
                <el-input
                  v-model="form.kf_address"
                  placeholder="请输入地址"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card
          shadow="never"
          header="分享配置"
          body-style="padding: 22px 22px 0 22px;"
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="10">
              <el-form-item label="分享图片:" prop="share_pic">
                <span slot="label">
                  分享图片
                  <el-tooltip placement="top">
                    <div slot="content">
                      用于分享时的图片选择<br />
                      大小尺寸跟分辨率同比例
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>

                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="modalPicTap('dan', 'share_pic', '分享图片')"
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.share_pic != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.share_pic"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('share_pic')"
                            ><i class="el-icon-close"></i
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :md="10">
              <el-form-item label="分享标题:" prop="share_title">
                <el-input
                  v-model="form.share_title"
                  placeholder="请输入分享标题"
                  clearable
                />
              </el-form-item>
              <el-form-item label="分享描述:" prop="share_desc">
                <el-input
                  v-model="form.share_desc"
                  placeholder="请输入分享描述"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card
          shadow="never"
          header="商家默认海报图"
          body-style="padding: 22px 22px 0 22px;"
        >
          <el-row :gutter="15">
            <el-col :lg="8" :md="8">
              <el-form-item label="商家默认海报图:" prop="share_banner">
                <span slot="label">
                  商家默认海报图
                  <el-tooltip placement="top">
                    <div slot="content"> 大小尺寸为600*924。 </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>

                <div class="ele-image-upload-list">
                  <div
                    class="ele-image-upload-item ele-image-upload-button"
                    @click="
                      modalPicTap('dan', 'share_banner', '商家默认海报图')
                    "
                  >
                    <div>
                      <div tabindex="0" class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div
                          class="ele-image-upload-item"
                          style="margin: 0 0 0 0"
                          v-if="form.share_banner != ''"
                        >
                          <div class="el-image">
                            <img
                              :src="form.share_banner"
                              width="100%"
                              height="100%"
                              class="el-image__inner"
                              style="object-fit: cover"
                            />
                          </div>
                          <div
                            class="ele-image-upload-close"
                            @click="handleRemove('share_banner')"
                          >
                            <i class="el-icon-close"></i
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <uploadPictures
          :isChoice="isChoice"
          :visible.sync="modalPic"
          @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          :title="modalTitle"
        ></uploadPictures>

        <!-- 底部工具栏 -->
        <div class="ele-bottom-tool">
          <div v-if="validMsg" class="ele-text-danger">
            <i class="el-icon-circle-close"></i>
            <span>{{ validMsg }}</span>
          </div>
          <div class="ele-bottom-tool-actions">
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
const DEFAULT_FORM = {
  site_image: [],
  site_name: '',
  site_ico: [],
  site_appid: '',
  site_copyright: '',
  site_beian: '',
  site_jingbeian: '',
  site_login_background: [],
  site_login_image: [],
  kf_date: '',
  kf_img: '',
  kf_mailbox: '',
  kf_phone: '',
  kf_wxno: '',
  kf_address: '',
  appid: '',
  appsecret: '',
  share_desc: '',
  share_pic: '',
  share_title: ''
};
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import request from '@/utils/request';
import uploadPictures from '@/components/uploadPictures';
import { save, query } from '@/api/platform';
import TinymceEditor from '@/components/TinymceEditor';

export default {
  name: 'SysBase',
  components: { EleImageUpload, uploadPictures, TinymceEditor },
  data() {
    return {
      modalTitle: '',
      modalPic: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      // 表单提交状态
      loading: false,
      // 表单数据
      form: {
        ...DEFAULT_FORM
      },
      // 表单验证规则
      rules: {},
      // 表单验证信息
      validMsg: '',
      editorConfig: {
        height: 525,
        relative_urls: false,
        convert_urls: false,
        images_upload_handler: (blobInfo, success, error) => {
          const file = blobInfo.blob();
          // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
          const formData = new FormData();
          formData.append('file', file, file.name);
          request({
            url: '/common/uploadFile',
            method: 'post',
            data: formData,
            onUploadProgress: (e) => {
              // 文件上传进度回调
            }
          })
            .then((res) => {
              if (res.data.code === 0) {
                success(res.data.data.url);
              } else {
                error(res.data.message);
              }
            })
            .catch((e) => {
              error('exception');
            });
        }
      }
    };
  },

  mounted() {
    query({ group: 'site' })
      .then((msg) => {
        if (msg != null) {
          this.form = msg;
        }
      })
      .catch((e) => {
        this.$message.error(e.message);
      });
  },
  methods: {
    // 选择图片
    modalPicTap(tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.modalPic = true;
    },
    // 选中图片
    getPic(pc) {
      switch (this.picTit) {
        case 'site_image':
          this.form.site_image = pc.satt_dir;
          break;
        case 'site_login_background':
          this.form.site_login_background = pc.satt_dir;
          break;
        case 'merchant_img':
          this.form.merchant_img = pc.satt_dir;
          break;
        case 'site_ico':
          this.form.site_ico = pc.satt_dir;
          break;
        case 'kf_img':
          this.form.kf_img = pc.satt_dir;
          break;
        case 'share_pic':
          this.form.share_pic = pc.satt_dir;
          break;
        case 'share_banner':
          this.form.share_banner = pc.satt_dir;
          break;
      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove(field) {
      this.form[field] = '';
    },
    /* 表单提交 */
    submit() {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          this.validMsg = '';
          this.loading = true;
          const data = {
            ...this.form
          };
          save(data)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    },
    onUpload(item) {
      console.log('item:', item);
      item.status = 'uploading';
      const formData = new FormData();
      formData.append('file', item.file);
      request({
        url: '/common/uploadFile',
        method: 'post',
        data: formData,
        onUploadProgress: (e) => {
          // 文件上传进度回调
          if (e.lengthComputable) {
            item.progress = (e.loaded / e.total) * 100;
          }
        }
      })
        .then((res) => {
          if (res.data.code === 0) {
            item.status = 'done';
            item.url = res.data.data.url;
            // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
            //item.url = res.data.data.thumbnail;  // 也可以不赋值 url 字段, 默认会显示为一个文件图标
            item.fileUrl = res.data.data.url;
          }
        })
        .catch((e) => {
          item.status = 'exception';
        });
    }
  }
};
</script>
